<template>
	<div class="toFlist">
<img :src="img1" alt="">
<div class="list" > 
	
	<div class="lis1">
		<div class="lis" v-for="(item, index) in arr" :key='index' @click="goClassify(item.path)">
			<!-- @click="goClassify(item.path)" -->
			<img :src="item.img" alt="">
			<div>{{ item.wenzi }}</div>
		</div>
	</div>

 <div class="lis3">
	<div class="lis2" v-for="(item, index) in arrs" :key="index+'-only'">
		<img :src="item.imgs" alt="" class="img">
		<div class="zi">{{ item.zi }}</div>
	</div>
 </div> 
</div>
	</div>
</template>

<script>
export default {
	data() { 
		return {
			img1: "https://gw.alicdn.com/imgextra/i3/O1CN01YzDTiA1Iu3nONVI5O_!!6000000000952-2-tps-749-335.png_790x10000.jpg_.webp",
			arr: [
				{
					img: 'https://img.alicdn.com/imgextra/i3/O1CN01zNyHqz1pUlFErXGBh_!!6000000005364-2-tps-198-156.png', wenzi: "酒店", path: '/dian',
				},
				{
					img: "https://img.alicdn.com/imgextra/i2/O1CN01Te9B531wWmIY1vRrR_!!6000000006316-2-tps-198-156.png",
					wenzi: "机票", path: '/',
				},
				{
					img: "https://img.alicdn.com/imgextra/i4/O1CN01f8AzNc1SQQKVa9amW_!!6000000002241-2-tps-198-156.png",
					wenzi: "火车票", path: '/',
				},
				{
					img: "https://img.alicdn.com/imgextra/i3/O1CN01AuBUnQ26MNSjbZLsC_!!6000000007647-2-tps-198-156.png",
					wenzi: "汽车票", path: '/',
				},
				{
					img: "https://img.alicdn.com/imgextra/i2/O1CN01uzNzGx1NUTl60KUz7_!!6000000001573-2-tps-198-156.png",
					wenzi: "门票", path: '/piao',
				}
				
			],
			arrs: [
				{
					imgs: "https://img.alicdn.com/imgextra/i4/O1CN01C7tcTP1JQ7WGUuIml_!!6000000001022-2-tps-198-96.png",
					zi: "接送/租车", 
				},
				{
					imgs: "https://img.alicdn.com/imgextra/i2/O1CN01py2ynC1H2BaoqwEkH_!!6000000000699-2-tps-198-96.png",
					zi: "酒店套餐",
				},
				{
					imgs: "https://img.alicdn.com/imgextra/i4/O1CN01Mt6mO51dJW7tx5FBr_!!6000000003715-2-tps-198-96.png",
					zi: "里程签到", 
				},
				{
					imgs: "https://img.alicdn.com/imgextra/i4/O1CN01wcf2QG1IsgbdSoPH5_!!6000000000949-2-tps-198-96.png",
					zi: "防疫信息查询",
				},
				{
					imgs: "https://img.alicdn.com/imgextra/i2/O1CN01ouGro11kHPcCVJSWf_!!6000000004658-2-tps-198-96.png",
					zi: "民宿", 
				}
			]
		}
	},
	methods: {
		goClassify(path) {
			this.$router.push(`${path}`).catch(err => { })
		}
	}
}
</script>

<style scoped>
.toFlist{
	height: 3.31rem;
}
.toFlist img{
height: 3.36rem;
}

.list{
	width: 6.9rem;
	height: 3.31rem;
	background-color: rgba(255, 255, 255, 0.122);
	position: relative;
	top: -3.2rem;
	left: .3rem;
	border-radius: .3rem;
	border: 1px solid rgb(228, 227, 227);
	font-size: 12px;
	
	text-align: center;
}
.lis {
	width: 1.32rem;
	height: 1.04rem;
	font-size: 12px;
}
.lis1{
display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.lis img {
	margin-left: 8px;
	width: 0.8rem;
	height: 0.8rem;
	margin-top: .25rem;
	margin-bottom: .1rem;
}
 .lis2{
	width: 2rem;
	height: 1.04rem;
	box-sizing: border-box;
	margin-top: .55rem;
	box-sizing: border-box;
 }
 .lis3{
	display: flex;
	justify-content: space-between;
 }
.lis2 .img {
	margin-left: -4px;
	width: 1.2rem;
	height: 0.6rem;
	margin-bottom: .1rem;
}
</style>